<template>
  <div id="commonTable">
    <el-table
      v-loading="loading"
      :data="dataList"
      :max-height="maxHeight"
      :border="border"
      :stripe="stripe"
      :tooltip-effect="tooltipEffect"

      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="checkBox"
        type="selection"
        width="55"
      />
      <template v-for="(item, index) in columns">
        <!--    显示, 且不为方法    -->
        <el-table-column
          v-if="item.show !== false && !item.action"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :align="item.align || 'center'"
          :width="item.width"
          :show-overflow-tooltip="showOverflowTooltip || item.showOverflowTooltip"
          :formatter="item.formatter?item.formatter : formatterValue"
        />

        <!--    显示, 且为插槽    -->
        <el-table-column
          v-else-if="item.show !== false && !item.action"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :align="item.align || 'center'"
          :width="item.width"
          :show-overflow-tooltip="showOverflowTooltip || item.showOverflowTooltip"
          :formatter="item.formatter?item.formatter : formatterValue"
        >
          <template slot-scope="scope">
            <slot :name="item.prop" :row="scope.row" />
          </template>
        </el-table-column>

        <!--    显示, 且为方法    -->
        <el-table-column
          v-else-if="item.show !== false && item.action"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :align="item.align || 'center'"
          :width="item.width"
        >
          <template slot-scope="scope">
            <template v-for="(fn, index2) in item.actions">
              <el-divider v-if="index2 > 0 " :key="'divider'+index2" direction="vertical" />
              <el-button :key="'button'+index2" :type="fn.type || 'text'" :size="fn.size || 'mini'" @click="handleClick(scope.row, fn.fnName)">{{ fn.title }}</el-button>
            </template>
          </template>
        </el-table-column>
      </template>

      <!--    方法插槽    -->
      <slot name="action" />

    </el-table>

    <!--  分页  -->
    <el-pagination
      style="text-align: center;margin:20px 0;"
      :current-page="pager.page"
      :page-size="pager.size"
      :page-sizes="pager.sizes"
      :total="pager.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'CommonTable',
  props: {
    columns: {
      type: Array,
      required: true
    },
    param: { // 参数
      type: Object,
      required: true
    },
    url: { // 数据访问路径
      type: String,
      required: true
    },
    stripe: { // 是否为斑马纹 table
      type: Boolean,
      default: false
    },
    border: { // 是否边框
      type: Boolean,
      default: false
    },
    checkBox: { // 是否多选
      type: Boolean,
      default: false
    },
    tooltipEffect: { // tooltip提示类型
      type: String,
      default: 'dark'
    },
    showOverflowTooltip: { // 当内容过长被隐藏时显示tooltip
      type: Boolean,
      default: false
    },
    getType: { // 请求方式
      type: String,
      default: 'GET'
    },
    maxHeight: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      dataList: [],
      pager: {
        page: 1,
        size: 10,
        sizes: [10, 50, 100],
        total: 0
      },
      loading: false
    }
  },
  methods: {
    handleClick(row, fnName) {
      this.$emit(`${fnName}`, row)
    },
    getMonth(params) {
      return request({
        url: this.url,
        method: this.getType,
        params
      })
    },
    otherMonth(data) {
      return request({
        url: this.url,
        method: this.getType,
        data
      })
    },
    handleSearch(page) {
      this.loading = true
      if (page) {
        this.pager.page = page
      }
      this.param.page = (this.pager.page - 1)
      this.param.size = this.pager.size
      if (this.getType.toUpperCase() === 'GET') {
        this.getMonth(this.param).then(res => {
          this.loading = false
          this.dataList = res.content
          this.pager.total = res.totalElements
          this.$emit('searchSuccess', res)
        }).catch(e => {
          this.loading = false
          this.$emit('searchError', e)
        })
        return
      }
      this.otherMonth(this.param).then(res => {
        this.loading = false
        this.dataList = res.content
        this.pager.total = res.totalElements
        this.$emit('searchSuccess', res)
      }).catch(e => {
        this.loading = false
        this.$emit('searchError', e)
      })
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    handleSizeChange(val) {
      this.pager.size = val
      this.pager.page = 1
      this.handleSearch()
      // this.$emit('handleSizeChange', val);
    },
    handleCurrentChange(val) {
      this.pager.page = val
      this.handleSearch()
      // this.$emit('handleCurrentChange', val);
    },
    formatterValue(row, column, cellValue) {
      return cellValue
    }
  }
}
</script>
